<template>
    <div>
      <div>{{ message }}</div>
      <div class="intro"> 
        <p v-html="intro"></p>       
        <img :src="imgUrl" alt="avatar" />
      </div>
      <hr />
      <input
        type="text"
        class="taskInput"
        v-model="newTask"
        placeholder="把计划写下来吗?"
        @keyup.enter="addTask"
      />
      <button @click="addTask">添加</button>
      <div class="priority">
        <div>
          <input type="radio" value="重要" v-model="priority">重要
          <input type="radio" value="一般" v-model="priority">一般
          <input type="radio" value="低" v-model="priority">低
        </div>        
        <p>任务优先级: {{ priority }}</p>
      </div>      
      <div>任务列表</div>
      <template v-if="tasks.length > 0">
        <ul>
          <li v-for="(task, index) in tasks" :key="index">
            <div class="yuan" :style="getStyleByTask(task)"></div> 
            <div class="task-text" v-if="!task.editing">{{ task.text }}</div>
            <input v-else type="text" v-model="task.text" />
            <div class="actions">
              <span class="edit" @click="toggleEdit(task)">
                {{ task.editing ? '保存' : '编辑' }}
              </span>
              <span class="delete" @click="deleteTask(index)">删除</span>
            </div>
          </li>
        </ul>
      </template>
      <template v-else>
        <p>没有数据！</p>
      </template>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue';
  
  const message = "你的代办事项";
  const intro = "<p style='color:yellow'>待办事项是一款任务管理工具，用户可以用它方便地组织和安排事务，把要做的事情一项一项地列出来，避免忘记。它具有以下功能</p>";
  const newTask = ref("");
  const priority = ref("一般");
  const tasks = ref([
    { text: "学习前端基础HTML5/CSS3/JavaScript", editing: false, priority: "一般" },
    { text: "学习Vue.JS的基础知识", editing: false, priority: "重要"  },
    { text: "学习前端构建工具", editing: false, priority: "一般"  },
    { text: "学习前端UI构建", editing: false, priority: "重要"  },
    { text: "学习前端状态管理", editing: false, priority: "一般"  },
    { text: "学习前端路由管理", editing: false, priority: "一般"  },
    { text: "学习前端网络管理", editing: false, priority: "低"  },
    { text: "综合案例实战", editing: false, priority: "一般"  },
  ]);
  
  const imgUrl = "./images/user.png";
  
  const getColor = (task) => {
    switch (task.priority) {
      case "重要":
        return "red";            
      case "低":
        return "gray";
      default:
        return "green";
    }
  };
  
  const getStyleByTask = (task) => {
    switch (task.priority) {
      case "重要":
        return { backgroundColor: 'red' };            
      case "低":
        return { backgroundColor: 'gray' };
      default:
        return { backgroundColor: 'green' };
    }
  };
  
  const addTask = () => {
    if (newTask.value.trim() !== "") {
      tasks.value.push({ text: newTask.value, editing: false, priority: priority.value });
      newTask.value = "";
      priority.value = "一般";
    }
  };
  
  const toggleEdit = (task) => {
    task.editing = !task.editing;
  };
  
  const deleteTask = (index) => {
    if (confirm("确定要删除这个任务吗？")) {
      tasks.value.splice(index, 1);
    }
  };
  
  const getRandomBool = () => {
    return Math.random() > 0.5;
  };
  
  const getRandomColor = () => {
    const letters = "0123456789ABCDEF";
    let color = "#";
    for (let i = 0; i < 6; i++) { 
      color += letters[Math.floor(Math.random() * 16)];    
    }
    return color;
  };
  
  const randomColor = { backgroundColor: getRandomColor() };
  const isSquare = computed(() => getRandomBool());
  const taskColor = '#00ff7f';
  </script>
  
  <style scoped>
  /* 你可以在这里添加样式 */
  .yuan {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 5px;
  }
  .taskInput {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
  }
  .actions {
    margin-top: 5px;
  }
  .edit, .delete {
    cursor: pointer;
    margin-right: 10px;
  }
  </style>